<template>
    <section class="footerProfile">
        <van-cell-group>
            <van-cell
                    :title="$t('profile.address')"
                    clickable
                    is-link
                    icon="location-o"
                    @click="toAddress"
            />
            <van-cell
                    :title="$t('profile.service')"
                    is-link
                    clickable
                    icon="smile-comment"
                    @click="toFeedback"
            ></van-cell>
            <van-cell :title="$t('profile.version')" clickable value="1.2.0">
                <svg class="icon" aria-hidden="true" slot="icon">
                    <use xlink:href="#icon-banben" />
                </svg>
            </van-cell>
            <van-cell
                    :title="$t('profile.loginOut')"
                    clickable
                    @click="loginOut"
                    v-if="$store.state.isLogin"
            >
                <svg class="icon" aria-hidden="true" slot="icon">
                    <use xlink:href="#icon-tuichu" />
                </svg>
            </van-cell>
        </van-cell-group>
    </section>
</template>

<script>
import { Cell, CellGroup, Icon } from 'vant';
import 'vant/lib/cell/style/less';
export default {
    name: 'footerProfile',
    components: {
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Icon.name]: Icon
    },
    methods: {
        loginOut () {
            this.$dialog
                .confirm({
                    message: this.$t('sureToLoginOutSystem')
                })
                .then(() => {
                    // 退出登录的业务逻辑
                    localStorage.removeItem('id');
                    localStorage.removeItem('token');
                    this.$store.commit('clearUserInfo');
                })
                .catch(() => {});
        },
        toAddress () {
            if (this.$util.checkUserLogin(this)) {
                this.$router.push({ name: 'my-address' });
            }
        },
        toFeedback () {
            if (this.$util.checkUserLogin(this)) {
                this.$router.push({ name: 'feedback' });
            }
        }
    }
};
</script>

<style scoped lang="less" src="./less/footer-profile.less"></style>
